<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专业群</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <blockquote class="layui-elem-quote quoteBox mod_default_box">
            <form class="layui-form">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="mtname" placeholder="请输入专业群名称" autocomplete="off" class="layui-input" />
                    </div>
                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-stu-submit">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </form>
        </blockquote>
        <div class="layui-card-body">
            <table class="layui-hide" id="t" lay-filter="t"></table>
        </div>

    </div>
</div>
</body>
<script type="text/html" id="tb">
    <div class="layui-container" style="margin-left:0px;">
        <a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-addition"></i>新增专业群</a>
    </div>
</script>
<script type="text/html" id="stu-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<!--<script type="text/html" id="caozuo">-->
<!--    {{#  if (d.status == 0) {  }}-->
<!--    <input type="button" value="启用" class="layui-btn layui-btn-sm" lay-event="qiyong"/>-->
<!--    {{# } else if(d.status == 1){  }}-->
<!--    <input type="button" value="禁用" class="layui-btn layui-btn-sm" lay-event="jinyong"/>-->
<!--    {{# } }}-->
<!--    <input type="button" value="编辑" class="layui-btn layui-btn-sm" lay-event="edit"/>-->
<script src="/js/layui/layui.all.js"></script>
<script>
    var $ = layui.$
    var table = layui.table;
    var form = layui.form;
    var upload = layui.upload;

    table.render({
        elem: '#t',
        id: 'stu-table-id',
        url: '/majortype/types',
        toolbar: '#tb',
        cols: [
            [{field: 'id', title: '序号', width: '10%', type:'numbers', align: 'center'},
                {field: 'mtname', title: '专业群名称', width: '30%', align: 'center'},
                {field: 'mtimg', title: '图片', width: '30%', align: 'center',templet:function (d) {
                        if(d.mtimg)
                            return   '<div><img src="/upload/'+d.mtimg+'" style="width:70px;height:50px;" onclick="previewImgs(this)"></div>'
                    }},
                // {
                //     fixed: 'right', field: 'status', align: 'center', title: '状态', width: 120, templet: function (d) {
                //         return d.status == 0 ? "<span style='color: red'>已禁用</span>" : "<span style='color: green'>已启用</span>"
                //     }
                // },
                {toolbar:"#stu-toolbar",align : 'center',title:"操作",fixed: 'right'}
            ]
        ]
        ,page: true
        ,page: {
            curr: layui.data("index_page").index
        },
        done: (res, curr, count) => {
            layui.data("index_page", {
                key: 'index',
                value: curr
            });
        }
    });

    //搜索操作
    form.on('submit(search-stu-submit)',function (data) {
        table.reload('stu-table-id',{
            where:{"key":data.field.mtname}
            ,page:{
                curr:1
            }
        });
        return false;
    });

    //监听工具条
    table.on('tool(t)', function (obj) {
        var data = obj.data
        if (obj.event === 'edit') {
            var index = layer.open({
                type: 2,
                area: ['80%', '80%'],
                skin: 'layui-layer-molv',
                content: 'editzhuanyeQun.html?mtid='+data.mtid, //这里content是一个普通的String
                end: function(){
                    location.reload();
                }
            });
            layer.full(index);
        }else if (obj.event === 'delete') {
            layer.confirm("确定删除专业群吗？",{icon: 3, title:'提示'},function (index) {
                layer.close(index);
                $.ajax({
                    type:"POST",
                    url:"/majortype/deleteMajortype?mtid=" + data.mtid,
                    success:function (res) {
                        if(res.code==0){
                            layer.msg("删除成功");
                            setTimeout(() => {
                                location.reload()
                            } , 500)
                        }else if (res.code == 1) {
                            layer.msg("删除失败");
                        }
                    }

                })
            })
        }
    });
    //新增操作
    table.on('toolbar(t)', function (obj) {
        var data = obj.data;
        // console.log(data);
        if (obj.event === 'add') {
            var index = layer.open({
                type: 2,
                title: "添加专业群信息",
                area: ['80%', '80%'],
                skin: 'layui-layer-molv',
                content: 'add_zhuanyeQun.html', //这里content是一个普通的String
                end: function(){
                    location.reload();
                }
            });
            layer.full(index);
        }
    });


</script>
<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],// area: [width + 'px',height+'px'],  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>

</body>
</html>